<template>
  <div class="cart">
  <h2>My cart</h2>
  <p><i>Please add some products to cart.</i></p>
  <ul>
    <li v-for="(p, index) in products" :key="p.id|| index">
      {{p.title}} - {{p.price}} x {{p.quantity}}
    </li>
  </ul>
  <p>Total: {{total}}</p>
  <p><button :disabled="!products.length" @click="checkout(products)">Checkout</button></p>
  <p v-show="checkoutStatus">Checkout {{checkoutStatus}}</p>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  computed: {
    ...mapGetters({
      products: 'cartProducts',
      checkoutStatus: 'checkoutStatus'
    }),
    total () {
      return this.products.reduce((total, p) => {
        return total + p.price * p.quantity
      }, 0)
    }
  },
  methods: {
    ...mapActions(['checkout'])
  }
}
</script>

<style>

</style>
